/**
 * ...
 * @author Thot
 */
 
 
function Sample7()
{	
	render();
}

Sample7.x = 0;
Sample7.y = 0;
Sample7.z = 0;
Sample7.r = 1;


function render()
{

	
	Sample7.x+=3;
	Sample7.y++;
	Sample7.z-=0.01;
	Sample7.r+=0.001;
	
	var canvas = document.getElementById("ui");
	var context = canvas.getContext("2d");
	var img = document.getElementById("iron_man");
	
	context.clearRect(0,0,canvas.width,canvas.height);
	
	var vec1 = mat4.identity();
	var vec2 = mat4.identity();
	var vec3 = mat4.identity();
	var vec4 = mat4.identity();
	var camera = mat4.identity();
	var projection = mat4.identity();
	var perspective = mat4.identity();
	
	
	
	mat4.perspective( 56, 1.33, 1, 100, perspective );
	mat4.translate( projection, [0.5,0.5,0], projection);
	mat4.translate( camera, [0,0,Sample7.z], camera);
	
	
	mat4.translate( vec1, [0.1,0.1,5], vec1);
	mat4.multiply( vec1, camera, vec1 );
	mat4.multiply( perspective, vec1, vec1 );
	mat4.multiply( projection, vec1, vec1 );
	
	
	mat4.translate( vec2, [-0.1,0.1,5.1], vec2);
	mat4.multiply( vec2, camera, vec2 );
	mat4.multiply( perspective, vec2, vec2 );
	mat4.multiply( projection, vec2, vec2 );
	//
	
	mat4.translate( vec3, [0.1,-0.1,5], vec3);
	mat4.multiply( vec3, camera, vec3 );
	mat4.multiply( perspective, vec3, vec3 );
	mat4.multiply( projection, vec3, vec3 );
	
	
	mat4.translate( vec4, [-0.1,-0.1,5], vec4);
	mat4.multiply( vec4, camera, vec4 );
	mat4.multiply( perspective, vec4, vec4 );
	mat4.multiply( projection, vec4, vec4 );
	
	
	var x1 = vec1[12]; y1 = vec1[13]; z1 = vec1[14]; w1 = vec1[15];
	var x2 = vec2[12]; y2 = vec2[13]; z2 = vec2[14]; w2 = vec2[15];
	var x3 = vec3[12]; y3 = vec3[13]; z3 = vec3[14]; w3 = vec3[15];
	var x4 = vec4[12]; y4 = vec4[13]; z4 = vec4[14]; w4 = vec4[15];
	
	
	
	
	x1/=w1;	y1/=w1;	z1/=w1;	w1/=w1;
	x2/=w2;	y2/=w2;	z2/=w2;	w2/=w2;
	x3/=w3;	y3/=w3;	z3/=w3;	w3/=w3;
	x4/=w4;	y4/=w4;	z4/=w4;	w4/=w4;
	
	
	x1*=800; y1*=600;
	x2*=800; y2*=600;
	x3*=800; y3*=600;
	x4*=800; y4*=600;
	
	
	
	var i = 1000;
	var texW = img.width;
	var texH = img.height;
	var time = new Date().getTime();
	
	
	while( --i > 1 )
	{
		//drawQuad( context, img, [[x1,y1,z1],[x2,y2,z2],[x3,y3,z3],[x4,y4,z4]]);
		drawTriangle( [[x1,y1,0,0],[x2,y2,1,0],[x3,y3,0,1]], context, img, texW, texH );
		drawTriangle( [[x2,y2,1,0],[x3,y3,0,1],[x4,y4,1,1]], context, img, texW, texH );
	}
	
	console.log(new Date().getTime() - time);
	
	
	setTimeout(render, 16);
}


function drawTriangle(vertices, ctx, texture, texW, texH ) {
 
        var x0 = vertices[0][0], x1 = vertices[1][0], x2 = vertices[2][0];
        var y0 = vertices[0][1], y1 = vertices[1][1], y2 = vertices[2][1];
        var u0 = vertices[0][2], u1 = vertices[1][2], u2 = vertices[2][2];
        var v0 = vertices[0][3], v1 = vertices[1][3], v2 = vertices[2][3];
		
		u0 *= texW;
		u1 *= texW;
		u2 *= texW;
		v0 *= texH;
		v1 *= texH;
		v2 *= texH;

        // Set clipping area so that only pixels inside the triangle will
        // be affected by the image drawing operation
        ctx.save(); 
		ctx.beginPath(); 
		ctx.moveTo(x0, y0); 
		ctx.lineTo(x1, y1);
        ctx.lineTo(x2, y2); 
		ctx.closePath(); 
		ctx.clip();

        // Compute matrix transform
        var delta 	= u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
        var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
        var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
        var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2
                      - v0*u1*x2 - u0*x1*v2;
        var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
        var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
        var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2
                      - v0*u1*y2 - u0*y1*v2;

        // Draw the transformed image
        ctx.transform(delta_a/delta, delta_d/delta,
                      delta_b/delta, delta_e/delta,
                      delta_c/delta, delta_f/delta);
        //ctx.drawImage(texture, 0, 0,texW,texH);
        ctx.restore();
}

function drawQuad( context, img, vertices )
{
		
	var x1 = vertices[0][0]; y1 = vertices[0][1]; z1 = vertices[0][2]; 
	var x2 = vertices[1][0]; y2 = vertices[1][1]; z2 = vertices[1][2]; 
	var x3 = vertices[2][0]; y3 = vertices[2][1]; z3 = vertices[2][2]; 
	var x4 = vertices[3][0]; y4 = vertices[3][1]; z4 = vertices[3][2]; 
	
	
	var a = (x2-x1)/img.width;
	var d = (y3-y1)/img.height;
	var b = (y2-y1)/img.width;
	var c = (x3-x1)/img.height;
	
	context.save();
	
	context.fillStyle = "black";
	context.beginPath();
	context.moveTo( x1, y1 );
	context.lineTo( x2, y2 );
	context.lineTo( x3, y3 );
	context.lineTo( x1, y1 );
	//context.stroke();
	context.clip();
	
	context.setTransform( a, b, c, d, x1, y1 );
	//context.drawImage(img, 0, 0, img.width, img.height );
	
	context.restore();	
	
	a = (x4-x3)/img.width;
	d = (y4-y2)/img.height;
	b = (y4-y3)/img.width;
	c = (x4-x2)/img.height;
	
	context.save();
	
	context.fillStyle = "black";
	context.beginPath();
	context.moveTo( x2, y2 );
	context.lineTo( x3, y3 );
	context.lineTo( x4, y4 );
	context.lineTo( x2, y2 );
	//context.stroke();
	context.clip();
	
	context.setTransform( a, b, c, d, x2-(x4-x3), y3-(y4-y2) );
	//context.drawImage(img, 0, 0, img.width, img.height );
	
	context.restore();
};

window.onload = function () 
{ 
	new Sample7(); 
};